<template>
  <com-card>
    <div slot="com_title">添加账号</div>
    <div slot="com_content">
      <el-row>
        <!-- xs   sm    md   lg      span:固定，不区分任何屏幕  -->
        <el-col :span="7">
            <!-- 使用model属性绑定数据源 -->
          <el-form size="small" label-width="100px" :model="formObj" :rules="checkForm" ref="user">
            <el-form-item label="账号：" prop="account" >
                <!-- 使用v-model实现双向数据绑定 -->
              <el-input type="text" v-model="formObj.account" :class.native="{success:flag}"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input type="password" v-model="formObj.password"></el-input>
            </el-form-item>
            <el-form-item label="用户组：">
              <el-select placeholder="请选择用户组"  v-model="formObj.userGroup">
                <el-option value="超级管理员" label="超级管理员"></el-option>
                <el-option value="普通管理员" label="普通管理员"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
                <!-- 为按钮绑定点击事件，触发save方法 -->
              <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </com-card>
</template>

<script>
import ComCard from "../../components/comcard/index.vue";

import {api_save} from "../../api/users.js";
export default {
  components: {
    ComCard
  },
  data(){

    // 定义验证函数
    const  checkAccount=(rule,value,callback)=>{
        // value: 当前需要验证的输入框的值
        //callback ：回调函数，用于回调成功与失败
        // 定义正则
        const reg=/^[0-9a-z]{3,12}$/ig;
        if(reg.test(value)){
          this.flag=true;
            callback();
        }else{
            return callback(new Error("请输入3-12位由数字或者字母组成的账号"))
        }
    }

    // 验证密码  第一个字符是字母，其后字符可以是字母 数字 下划线，长度为3-12
    function checkPassword(rule,value,callback){
        // 定义正则对象
        const reg=/^[a-z][a-z0-9_]{2,11}$/ig;
        if(reg.test(value)){

            callback();
        }else{
            return callback(new Error("第一个字符是字母，其后字符可以是字母 数字 下划线，长度为3-12"));
        }
    }
      return {
          flag:false,
        // 1.定义表单绑定的数源
          formObj:{
              account:"",
              password:"",
              userGroup:"超级管理员"
          },
        //定义表单验证对象
        checkForm:{
              account:[
                  {validator:checkAccount,trigger:"blur"}
              ],
              password:[
                  {validator:checkPassword,trigger:"blur"}
              ]
        }
      }
  },
  methods:{
     // 点击保存时触发的save函数
      save(){
          this.$refs.user.validate(async (b)=>{
              if(b){
              let rst=  await api_save(this.formObj);
              let {code,msg}=rst;
              if(code==0){
                this.$router.push("/users/list");
              }
              }
          })
     
      }
  }
};
</script>

<style lang="less" scoped>
/deep/.success{
    border-color: green !important;
}
</style>